<template>
  <div class="MyFootmark">
    <index-header title="我的足迹" title1="天鹿市场" title2="天鹿的SuperStore" ifTitleClick titleBgColor="#32aefd" placeholder="输入日期以查询，例如：2020-03-20" :searchEvent="handleSearch">
      <template #other>
        <div class="allManage" @click="handleAllManage">批量管理</div>
      </template>
    </index-header>
    <div class="main">
      <ShowContain>
        <div class="list">
          <div class="item" v-for="(item,index) in whichMyFoot" :key="index">
            <div class="date">
              <div class="num">
                {{item.date}}
              </div>
              <span v-if="allManage" @click="handleDeleteDate(item.date)">删除当天</span>
              <div class="line" />
            </div>
            <div class="content">
              <div class="content-item" v-for="(good,i) in item.goods" :key="i">
                <div class="img">
                  <img :src="good.goods2title_title" alt="" @click="handleGoDetail(good)">
                  <div v-if="good.manage" class="manage">
                    <div @click="handleDelete(good)">
                      <i class="iconfont icon-delete"></i>
                    </div>
                  </div>
                </div>
                <p>{{good.goods_name}}</p>
              </div>
            </div>
          </div>
        </div>
      </ShowContain>
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/IndexHeader';
import ShowContain from '@/components/ShowContain';
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
  name: '',
  components: {
    IndexHeader,
    ShowContain
  },
  computed: {
    ...mapState({
      myFootMark: state => state.trace.myFootMark,
      myFootMarkFilter: state => state.trace.myFootMarkFilter,
      userInfo: state => state.user.userInfo,
      login: state => state.user.login
    }),
    whichMyFoot(){
      return this.showSearch ? this.myFootMarkFilter : this.myFootMark;
    }
  },
  data () {
    return {
      allManage: false,
      showSearch: false
    };
  },
  created(){
    this.fetchGetTrace({ user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id })
  },
  methods: {
    ...mapMutations(['searchTraceDate']),
    ...mapActions(['fetchGetTrace','fetchDeleteOneTrace','fetchDeleteTraceByTime']),
    handleAllManage () {
      this.allManage = !this.allManage;
      this.myFootMark.forEach(item => {
        item.goods.forEach(good => {
          good.manage = this.allManage;
        })
      })
    },
    handleDelete (currentGood) {
      this.whichMyFoot.forEach(item => {
        item.goods.forEach((good, index) => {
          if (good.trace_id === currentGood.trace_id) {
            item.goods.splice(index, 1)
          }
        })
      });
      this.fetchDeleteOneTrace({ user_id: this.userInfo.user_id, trace_id: currentGood.trace_id });
    },
    handleDeleteDate (date) {
      this.whichMyFoot.forEach((item, index) => {
        if (item.date === date) {
          this.whichMyFoot.splice(index, 1);
        }
      });
      this.fetchDeleteTraceByTime({ user_id: this.userInfo.user_id, trace_time: date });
    },
    handleSearch(content){
      if(content.replace(' ','')){
        this.showSearch = true;
        this.searchTraceDate(content);
      }else{
        this.showSearch = false;
      }
    },
    handleGoDetail(good){
      this.$router.push({
        name: 'Detail',
        query: { goods_id: good.goods_id }
      })
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>